<div
  tabindex="0"
  role="button"
  class="po-breadcrumb-favorite po-clickable"
  (click)="toggleFavoriteAction()"
  (keyup.enter)="toggleFavoriteAction()"
>
  <po-icon
    p-icon="ICON_STAR"
    class="po-breadcrumb-favorite-star po-clickable"
    [class.po-breadcrumb-favorite-star-active]="favorite"
  >
  </po-icon>
  @if (favorite && !hiddenLiteral) {
    <span class="po-hidden-sm po-breadcrumb-favorite-label">{{ literals?.unfavorite }}</span>
  }
  @if (!favorite && !hiddenLiteral) {
    <span class="po-hidden-sm po-breadcrumb-favorite-label">{{ literals?.favorite }}</span>
  }
</div>
